<script lang='ts' setup>
import { appRef } from "@/models/app.ref";
import { NoteInfo, ShowNoteInfo } from "@/models/Note";
import { ref, defineProps, onMounted, VNodeRef } from "vue";
import { noteService } from "@/services/note.service";

defineExpose({ getList });
const emit = defineEmits(["click"]);
const listDom = ref<VNodeRef>(null as VNodeRef);
const list = ref([] as NoteInfo[]);
const page = ref(0);
const number = ref(0);

onMounted(() => getList());

function getList(): void {
  noteService.list(page.value, number.value).then(() => {
    list.value = appRef.note.list;
  });
}

function onScroll(): void {
  const listDom = document.getElementById("app");
  listDom.addEventListener("scroll", () => {
    const { clientHeight, scrollTop, scrollHeight } = listDom;
    if (clientHeight + scrollTop >= scrollHeight) {
      console.log("到底了");
    } else {
      console.log("距底部距离：", scrollHeight - clientHeight - scrollTop);
    }
  });
}

const currNote = ref();
function onClick(item: NoteInfo): void {
  emit("click", item);
  // if (currNote.value?.uid === item.uid) {
  //   emit("click", item);
  // };
  // currNote.value = item;
}
</script>
<template>
  <div class="list" id="list" ref="listDom">
    <div class="box flex-c animated fadeInUp" :class="{ 'activity': currNote?.uid === item.uid }" v-for="item in list"
      :key="item.uid" :style="{ background: item.bgcolor }" @click="onClick(item)">
      <div class="text ellipsis" :class="{ 'ellipsis3': currNote?.uid === item.uid }">{{ item.remark }}</div>
      <div class="flex user">
        <img v-if="item.user.avatar" class="cover" :src="item.user.avatar" alt="">
        <span class="name"> {{ item.user.nick }} </span>
      </div>
    </div>
  </div>
</template>
<style lang='scss' scoped>
.list {
  width: 100%;
  height: 100%;
  flex: 1;
  position: relative;
  // margin-top: 50px;

  .box {
    width: 100%;
    padding: 10px 12px;
    border-radius: 7px;
    box-shadow: 0 0 10px #00000048;
    margin-bottom: 15px;

    transform: translateY(0);
    position: relative;
    transition: all 1s;

    &:hover {
      box-shadow: 0 0 20px #00000071;
    }

    .text {
      width: 100%;
      line-height: 23px;
      font-size: 20px;
    }

    .user {
      width: 100%;
      margin-top: 10px;
      color: #292929;
      font-size: 14px;

      .cover {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 7px;
      }
    }
  }

  .activity {
    margin-bottom: 45px;
  }
}
</style>